<template>
	<view class="main">
		<view class="step-title">
			<view></view>
			<text>流程办理明细</text>
		</view>
		<view class="step-line">
			<u-time-line>
				<u-time-line-item v-for="(item, index) in data2" :key="index">
					<!-- 此处自定义了左边内容，用一个图标替代 -->
					<template v-slot:node>
						<view class="node"><view class="node-small"></view></view>
					</template>
					<template v-slot:content>
						<view>
							<view class="timeAndBtn">
								<view>
									<text>{{item.NAME}}</text>
									<view>
										{{item.CONTENT}}
									</view>
								</view>
								
							</view>
							
						</view>
					</template>
				</u-time-line-item>
			</u-time-line>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				itemCode:'',
				itemData:{},
				data2:[]
			}
		},
		onLoad(option){
			this.itemCode = option.itemCode;
			this.selectItemDetail();
		},
		methods: {
			selectItemDetail(){
				uni.showLoading({
					title: '搜索中...',
					mask: true
				});
				this.$ajax({
					url: '/api/wwwBiz/selectItemDetail',
					method: 'POST',
					data:{
						itemCode:this.itemCode
					}
				}).then(res => {
					if (res.code == 200) {						
						this.data2 = res.data.data2.data;
					}
				}).finally(()=>{
					uni.hideLoading();
				})
			}
		},
	}
</script>

<style scoped lang="less">
    .main{
       padding:0 30rpx;
       font-size: 28rpx;
       color: #333333;
       /deep/ .u-time-axis:before {
       	border: 1rpx solid #5b96ff;
       }
       
		.step-title {
			display: flex;
			align-items: center;
			font-size: 36rpx;
			color: #333333;
			
			view {
				width: 6rpx;
				height: 36rpx;
				background-color: #3c90f2;
				border-radius: 2rpx;
				margin-right: 22rpx;
			}
		}
		.step-line {
			margin-left: 40rpx;
			.node {
				width: 36rpx;
				height: 36rpx;
				border-radius: 50%;
				border: solid 2rpx #5b96ff;
				// 使内部圆居中
				display: flex;
				align-items: center;
				justify-content: center;
				.node-small {
					width: 24rpx;
					height: 24rpx;
					border-radius: 50%;
					background-color: #5b96ff;
				}
			}
			.timeAndBtn {
				display: flex;
				align-items: center;
				margin-top: 22rpx;
				view {
					font-size: 28rpx;
					color: #5b96ff;
					view {
						color: #333333;
					}
				}
				
			}
			.view-info {
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
			}
		}
		
    }
</style>
